<template>
  <div class="interview-training">
    <div class="page-header">
      <h1>{{ $t('exam.interview') }}</h1>
      <p class="subtitle">专业面试培训，提升面试技巧，增加就业成功率</p>
    </div>

    <div class="content-wrapper">
      <!-- 培训介绍 -->
      <el-card class="training-intro">
        <template #header>
          <div class="card-header">
            <span>培训介绍</span>
          </div>
        </template>
        <div class="intro-content">
          <p>面试是求职过程中的关键环节，我们的面试培训课程将帮助您掌握面试技巧，提高面试成功率，顺利获得理想工作。</p>
          <div class="training-features">
            <div class="feature-item">
              <el-icon class="feature-icon"><User /></el-icon>
              <h4>一对一指导</h4>
              <p>专业导师提供个性化面试指导</p>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><VideoPlay /></el-icon>
              <h4>模拟面试</h4>
              <p>真实面试环境模拟，提高实战能力</p>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><Document /></el-icon>
              <h4>资料准备</h4>
              <p>帮助准备简历、自我介绍等材料</p>
            </div>
            <div class="feature-item">
              <el-icon class="feature-icon"><ChatDotRound /></el-icon>
              <h4>语言训练</h4>
              <p>日语口语和表达能力的专项训练</p>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 培训课程 -->
      <el-card class="training-courses">
        <template #header>
          <div class="card-header">
            <span>培训课程</span>
          </div>
        </template>
        <div class="courses-grid">
          <div v-for="course in courses" :key="course.id" class="course-card">
            <div class="course-header">
              <div class="course-type" :class="course.typeClass">
                {{ course.type }}
              </div>
              <h3>{{ course.name }}</h3>
            </div>
            <p class="course-description">{{ course.description }}</p>
            <div class="course-content">
              <h4>课程内容：</h4>
              <ul>
                <li v-for="item in course.content" :key="item">{{ item }}</li>
              </ul>
            </div>
            <div class="course-meta">
              <div class="meta-item">
                <span class="label">课程时长：</span>
                <span class="value">{{ course.duration }}</span>
              </div>
              <div class="meta-item">
                <span class="label">课程费用：</span>
                <span class="value price">{{ course.price }}</span>
              </div>
              <div class="meta-item">
                <span class="label">适合人群：</span>
                <span class="value">{{ course.target }}</span>
              </div>
            </div>
            <div class="course-actions">
              <el-button type="primary" @click="enrollCourse(course.id)">
                立即报名
              </el-button>
              <!--<el-button type="text" @click="viewDetails(course.id)">-->
                <!--查看详情-->
              <!--</el-button>-->
            </div>
          </div>
        </div>
      </el-card>

      <!-- 面试技巧 -->
      <el-card class="interview-tips">
        <template #header>
          <div class="card-header">
            <span>面试技巧</span>
          </div>
        </template>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="面试前准备" name="1">
            <div class="tips-content">
              <h4>面试前的准备工作</h4>
              <div class="tips-grid">
                <div class="tip-item">
                  <h5>了解公司</h5>
                  <p>研究公司背景、业务范围、企业文化等信息</p>
                </div>
                <div class="tip-item">
                  <h5>准备材料</h5>
                  <p>整理简历、证书、作品集等相关材料</p>
                </div>
                <div class="tip-item">
                  <h5>模拟练习</h5>
                  <p>练习自我介绍和常见问题的回答</p>
                </div>
                <div class="tip-item">
                  <h5>着装准备</h5>
                  <p>选择合适的职业装，注意仪表整洁</p>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="面试中表现" name="2">
            <div class="tips-content">
              <h4>面试过程中的注意事项</h4>
              <div class="tips-grid">
                <div class="tip-item">
                  <h5>礼仪规范</h5>
                  <p>保持微笑，注意坐姿，展现良好的精神面貌</p>
                </div>
                <div class="tip-item">
                  <h5>语言表达</h5>
                  <p>语速适中，表达清晰，避免使用过于口语化的表达</p>
                </div>
                <div class="tip-item">
                  <h5>回答问题</h5>
                  <p>认真倾听问题，思考后再回答，保持诚实</p>
                </div>
                <div class="tip-item">
                  <h5>积极互动</h5>
                  <p>主动提问，展现对工作的热情和兴趣</p>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="面试后跟进" name="3">
            <div class="tips-content">
              <h4>面试结束后的跟进工作</h4>
              <div class="tips-grid">
                <div class="tip-item">
                  <h5>感谢信</h5>
                  <p>发送感谢邮件，表达对面试机会的感谢</p>
                </div>
                <div class="tip-item">
                  <h5>总结反思</h5>
                  <p>回顾面试过程，总结经验教训</p>
                </div>
                <div class="tip-item">
                  <h5>保持联系</h5>
                  <p>适当跟进，了解面试结果</p>
                </div>
                <div class="tip-item">
                  <h5>继续准备</h5>
                  <p>无论结果如何，都要继续提升自己</p>
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <!-- 常见问题 -->
      <el-card class="common-questions">
        <template #header>
          <div class="card-header">
            <span>常见问题</span>
          </div>
        </template>
        <el-collapse v-model="questionNames">
          <el-collapse-item 
            v-for="question in commonQuestions" 
            :key="question.id"
            :title="question.title" 
            :name="question.id"
          >
            <div class="question-content">
              <p><strong>问题：</strong>{{ question.question }}</p>
              <p><strong>回答建议：</strong>{{ question.answer }}</p>
              <div class="answer-tips">
                <h5>回答要点：</h5>
                <ul>
                  <li v-for="tip in question.tips" :key="tip">{{ tip }}</li>
                </ul>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <!-- 成功案例 -->
      <el-card class="success-stories">
        <template #header>
          <div class="card-header">
            <span>成功案例</span>
          </div>
        </template>
        <div class="stories-grid">
          <div v-for="story in successStories" :key="story.id" class="story-card">
            <div class="story-header">
              <el-avatar :size="50" :src="story.avatar" />
              <div class="story-info">
                <h4>{{ story.name }}</h4>
                <p class="story-position">{{ story.position }}</p>
                <p class="story-company">{{ story.company }}</p>
              </div>
            </div>
            <div class="story-content">
              <p>{{ story.content }}</p>
            </div>
            <div class="story-footer">
              <span class="story-time">{{ story.time }}</span>
              <el-tag :type="story.result === '成功' ? 'success' : 'warning'">
                {{ story.result }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 预约咨询 -->
      <el-card class="consultation-booking">
        <template #header>
          <div class="card-header">
            <span>预约咨询</span>
          </div>
        </template>
        <div class="consultation-content">
          <p>如果您对面试培训有任何疑问，或者想要预约免费咨询，请填写以下信息：</p>
          <el-form :model="consultationForm" :rules="consultationRules" ref="consultationFormRef" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="consultationForm.name" placeholder="请输入您的姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="consultationForm.phone" placeholder="请输入您的联系电话" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="目标职位" prop="targetPosition">
                  <el-input v-model="consultationForm.targetPosition" placeholder="请输入您的目标职位" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="日语水平" prop="japaneseLevel">
                  <el-select v-model="consultationForm.japaneseLevel" placeholder="请选择您的日语水平" style="width: 100%">
                    <el-option label="N1" value="N1" />
                    <el-option label="N2" value="N2" />
                    <el-option label="N3" value="N3" />
                    <el-option label="N4" value="N4" />
                    <el-option label="N5" value="N5" />
                    <el-option label="其他" value="other" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="咨询内容" prop="content">
              <el-input 
                v-model="consultationForm.content" 
                type="textarea" 
                :rows="4"
                placeholder="请详细描述您的咨询内容或遇到的问题"
              />
            </el-form-item>
            <el-form-item label="预约时间" prop="appointmentTime">
              <el-date-picker
                v-model="consultationForm.appointmentTime"
                type="datetime"
                placeholder="请选择预约时间"
                style="width: 100%"
                :disabled-date="disabledDate"
                :disabled-hours="disabledHours"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitConsultation">
                提交预约
              </el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'InterviewTraining',
  setup() {
    const activeNames = ref(['1'])
    const questionNames = ref(['1'])
    const consultationFormRef = ref()

    const courses = ref([
      {
        id: 1,
        type: '基础班',
        typeClass: 'type-basic',
        name: '面试基础技能培训',
        description: '适合面试经验较少的求职者，系统学习面试基础知识',
        content: [
          '面试礼仪和着装规范',
          '自我介绍技巧',
          '常见问题回答方法',
          '简历制作和优化'
        ],
        duration: '2周',
        price: '¥2,800',
        target: '应届毕业生、转行求职者'
      },
      {
        id: 2,
        type: '进阶班',
        typeClass: 'type-advanced',
        name: '面试技巧提升班',
        description: '针对有一定面试经验的求职者，提升面试技巧和成功率',
        content: [
          '高级面试技巧',
          '压力面试应对',
          '薪资谈判技巧',
          '职业规划指导'
        ],
        duration: '3周',
        price: '¥3,800',
        target: '有工作经验的求职者'
      },
      {
        id: 3,
        type: 'VIP班',
        typeClass: 'type-vip',
        name: '一对一面试指导',
        description: '专业导师一对一指导，提供个性化面试培训方案',
        content: [
          '个性化面试策略',
          '模拟面试训练',
          '面试材料准备',
          '后续跟进指导'
        ],
        duration: '4周',
        price: '¥5,800',
        target: '高端职位求职者'
      }
    ])

    const commonQuestions = ref([
      {
        id: 1,
        title: '请介绍一下您自己',
        question: '这是面试中最常见的问题，如何回答才能给面试官留下好印象？',
        answer: '自我介绍应该简洁明了，突出与职位相关的经验和技能。',
        tips: [
          '控制在1-2分钟内',
          '突出与职位相关的经验',
          '展现个人特色和优势',
          '表达对职位的兴趣'
        ]
      },
      {
        id: 2,
        title: '为什么选择我们公司？',
        question: '面试官想了解您对公司的了解程度和求职动机。',
        answer: '应该从公司文化、发展前景、个人发展等角度来回答。',
        tips: [
          '提前了解公司信息',
          '结合个人职业规划',
          '展现对公司的认同',
          '避免过于功利的回答'
        ]
      },
      {
        id: 3,
        title: '您的优缺点是什么？',
        question: '面试官想了解您的自我认知和诚实度。',
        answer: '优点要结合职位要求，缺点要展现改进的意愿。',
        tips: [
          '优点要具体且相关',
          '缺点要真实但不过分',
          '展现改进的意愿',
          '避免影响工作的缺点'
        ]
      }
    ])

    const successStories = ref([
      {
        id: 1,
        name: '张小明',
        position: '软件工程师',
        company: '日本某IT公司',
        avatar: 'https://via.placeholder.com/50x50/409EFF/ffffff?text=张',
        content: '通过面试培训，我学会了如何更好地展示自己的技术能力，最终成功获得了理想的工作机会。',
        time: '2024-01-15',
        result: '成功'
      },
      {
        id: 2,
        name: '李小红',
        position: '销售经理',
        company: '日本某贸易公司',
        avatar: 'https://via.placeholder.com/50x50/67C23A/ffffff?text=李',
        content: '培训老师帮助我准备了详细的面试材料，让我在面试中更加自信，顺利通过了面试。',
        time: '2024-01-20',
        result: '成功'
      },
      {
        id: 3,
        name: '王大力',
        position: '机械工程师',
        company: '日本某制造公司',
        avatar: 'https://via.placeholder.com/50x50/E6A23C/ffffff?text=王',
        content: '通过模拟面试训练，我克服了紧张情绪，在真实面试中表现更加出色。',
        time: '2024-01-25',
        result: '成功'
      }
    ])

    const consultationForm = reactive({
      name: '',
      phone: '',
      targetPosition: '',
      japaneseLevel: '',
      content: '',
      appointmentTime: ''
    })

    const consultationRules = {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入联系电话', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      targetPosition: [
        { required: true, message: '请输入目标职位', trigger: 'blur' }
      ],
      japaneseLevel: [
        { required: true, message: '请选择日语水平', trigger: 'change' }
      ],
      content: [
        { required: true, message: '请输入咨询内容', trigger: 'blur' }
      ],
      appointmentTime: [
        { required: true, message: '请选择预约时间', trigger: 'change' }
      ]
    }

    const enrollCourse = (courseId) => {
      ElMessage.success('课程报名成功！')
    }

    const viewDetails = (courseId) => {
      ElMessage.success('查看课程详情！')
    }

    const submitConsultation = async () => {
      try {
        await consultationFormRef.value.validate()
        ElMessage.success('预约提交成功！我们会尽快与您联系。')
        // 这里可以调用API提交表单数据
      } catch (error) {
        ElMessage.error('请检查表单信息是否正确')
      }
    }

    const resetForm = () => {
      consultationFormRef.value.resetFields()
    }

    const disabledDate = (time) => {
      return time.getTime() < Date.now() - 8.64e7
    }

    const disabledHours = () => {
      return [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]
    }

    return {
      activeNames,
      questionNames,
      courses,
      commonQuestions,
      successStories,
      consultationForm,
      consultationRules,
      consultationFormRef,
      enrollCourse,
      viewDetails,
      submitConsultation,
      resetForm,
      disabledDate,
      disabledHours
    }
  }
}
</script>

<style scoped>
.interview-training {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  font-size: 2.5rem;
  color: #303133;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.2rem;
  color: #606266;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 1.2rem;
}

.training-intro .intro-content {
  line-height: 1.6;
}

.training-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.feature-item {
  text-align: center;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 2rem;
  color: #409eff;
  margin-bottom: 10px;
}

.feature-item h4 {
  color: #303133;
  margin: 10px 0;
}

.feature-item p {
  color: #606266;
  margin: 0;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.course-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s ease;
}

.course-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.course-type {
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.8rem;
  font-weight: bold;
  color: white;
}

.course-type.type-basic {
  background: #67c23a;
}

.course-type.type-advanced {
  background: #e6a23c;
}

.course-type.type-vip {
  background: #f56c6c;
}

.course-header h3 {
  margin: 0;
  color: #303133;
}

.course-description {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.5;
}

.course-content h4 {
  color: #303133;
  margin-bottom: 10px;
}

.course-content ul {
  margin: 0 0 15px 0;
  padding-left: 20px;
}

.course-content li {
  color: #606266;
  margin-bottom: 5px;
}

.course-meta {
  margin-bottom: 20px;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.meta-item .label {
  color: #606266;
}

.meta-item .value {
  color: #303133;
  font-weight: 500;
}

.meta-item .price {
  color: #f56c6c;
  font-weight: bold;
}

.course-actions {
  display: flex;
  gap: 10px;
}

.tips-content h4 {
  color: #303133;
  margin-bottom: 20px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.tip-item {
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background: #fafafa;
}

.tip-item h5 {
  color: #409eff;
  margin: 0 0 8px 0;
}

.tip-item p {
  color: #606266;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.question-content p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.answer-tips {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-top: 15px;
}

.answer-tips h5 {
  color: #303133;
  margin: 0 0 10px 0;
}

.answer-tips ul {
  margin: 0;
  padding-left: 20px;
}

.answer-tips li {
  color: #606266;
  margin-bottom: 5px;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.story-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  transition: transform 0.3s ease;
}

.story-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.story-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.story-info h4 {
  margin: 0 0 5px 0;
  color: #303133;
}

.story-position {
  margin: 0 0 3px 0;
  color: #409eff;
  font-weight: 500;
}

.story-company {
  margin: 0;
  color: #606266;
  font-size: 0.9rem;
}

.story-content {
  margin-bottom: 15px;
}

.story-content p {
  color: #606266;
  line-height: 1.5;
  margin: 0;
}

.story-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-time {
  color: #909399;
  font-size: 0.9rem;
}

.consultation-content p {
  margin-bottom: 20px;
  color: #606266;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .interview-training {
    padding: 15px;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .training-features {
    grid-template-columns: 1fr;
  }
  
  .courses-grid {
    grid-template-columns: 1fr;
  }
  
  .tips-grid {
    grid-template-columns: 1fr;
  }
  
  .stories-grid {
    grid-template-columns: 1fr;
  }
  
  .course-actions {
    flex-direction: column;
  }
}
</style>
